<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- T -->
    <title>Nature - brings you to enjoy the wonders of nature！</title>
    <!-- D -->
    <meta name="description"
        content="Nature-provides the mountain, the river, the lake, the park the beauty, is specially suitable for the tourist exchange website." />
    <!-- K -->
    <meta name="keywords" content="nature, beauty, ecology, environment, life, communication" />

    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <script src="js/animate.js"></script>
    <script src="js/banner.js"></script>
    <script src="js/index.js"></script>
</head>

<body>
    <!-- 顶部搜索、登录注册栏 -->
    <div class="header" id="header">
        <div class="w">
            <div class="fl">
                <input type="search" name="" id="" placeholder="Search">
                <a href="#"><i class="fa fa-search" aria-hidden="true"></i></a>
            </div>
            <div class="fr">
                <div class="reg fr">
                    <i class="fa fa-pencil" aria-hidden="true"></i> Register
                </div>
                <div class="user fr">
                    <i class="fa fa-user-circle-o" aria-hidden="true"></i> Login
                </div>
            </div>
        </div>
    </div>
    <!-- 顶部快捷导航shortcut制作 -->
    <section class="shortcut">
        <div class="w">
            <h1>
                <a href="index.html" title="natural">
                    natural
                </a>
            </h1>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ENJOYING</a></li>
                <li><a href="#">BLOG</li>
                <li><a href="#">TOLKING</a></li>
                <li><a href="#">ANSWER</a></li>
                <li><a href="#">COMMUNITE</a></li>
                <li><a href="#">ABOUT</a></li>
            </ul>
        </div>
    </section>
    <!-- part1制作 -->
    <div class="part1" id="part1">
        <div class="mask">
            <ul>
                <li class="lbtn"></li>
                <li class="rbtn"></li>
            </ul>
        </div>
        <ul class="part1-img" id='part1-img'>
            <li><img src="upload/part1-pc1.jpg" title="Danxia's Morning" alt=" Danxia's Morning"></li>
            <li><img src="upload/part1-pc2.jpg" title="Danxia's Morning" alt=" Danxia's Morning"></li>
            <li><img src="upload/part1-pc3.jpg" title="Danxia's Morning" alt=" Danxia's Morning"></li>
            <li><img src="upload/part1-pc4.jpg" title="Danxia's Morning" alt=" Danxia's Morning"></li>
            <li><img src="upload/part1-pc5.jpg" title="Danxia's Morning" alt=" Danxia's Morning"></li>
        </ul>


        <ol class="part1-dot" id='part1-dot'>
        </ol>
    </div>
    <!-- part2制作 -->
    <div class="part2">
        <div class="w">
            <h2 class="arttitle">Steal of the month</h2>
            <span class="line"></span>
            <div class="introduct">
                <p>That we can tuck in our children at night and know that they are fed and clothed and safe from harm.
                </p>
                <p>Our trials and triumphs became at once unique and universal.</p>
            </div>
            <div class="part2-btn"></div>
        </div>
    </div>
    <!-- part3制作 -->
    <div class="part3">
        <div class="w">
            <h2 class="arttitle">Latest works</h2>
            <span class="line"></span>
            <div class="introduct">
                <p>That we can tuck in our children at night and know that they are fed and clothed and safe from harm.
                </p>
                <p>Our trials and triumphs became at once unique and universal.</p>
            </div>
            <ul class="part3-img" id='part3-img'>
                <li>
                    <img src="upload/part3-pc1.jpg" title="Danxia's Morning" alt=" Danxia's Morning">
                    <div class="part3-mask1">
                        <div class="leftbox">
                            <h5>Lindemans Wine</h5>
                            <p>Art Direction, Web Design</p>
                        </div>
                        <div class="rightbox like">
                            <i class="fa fa-heart" aria-hidden="true"></i>
                            <p>57</p>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="upload/part3-pc2.jpg" title="Danxia's Morning" alt=" Danxia's Morning">
                    <div class="part3-mask2">
                        <div class="leftbox">
                            <h5>Lindemans Wine</h5>
                            <p>Art Direction, Web Design</p>
                        </div>
                        <div class="rightbox like">
                            <i class="fa fa-heart" aria-hidden="true"></i>
                            <p>57</p>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="upload/part3-pc3.jpg" title="Danxia's Morning" alt=" Danxia's Morning">
                    <div class="part3-mask3">
                        <div class="leftbox">
                            <h5>Lindemans Wine</h5>
                            <p>Art Direction, Web Design</p>
                        </div>
                        <div class="rightbox like">
                            <i class="fa fa-heart" aria-hidden="true"></i>
                            <p>57</p>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
    </div>
    <div class="part3-mask">
        <img src="upload/part1-pc1.jpg" alt="">
    </div>
    <!-- part4制作 -->
    <div class="part4">
        <div class="w">
            <div class="part4-introduction">
                Amber is the most metrolly WordPress theme ever created.
                <img src="images/part4-btn.png" alt="">
            </div>
        </div>
    </div>
    <!-- part5制作 -->
    <div class="part5">
        <div class="w">
            <h2 class="arttitle">Superb features</h2>
            <span class="line"></span>
            <div class="introduct">
                <div class="up">
                    <div class="fl">
                        <div class="icon">
                            <img src="images/part5-icon1.png" alt="">
                        </div>
                        <div class="artcle">
                            <h3>Brilliant creative design</h3>
                            <p>
                                Ah, well! It means much the same thing, said the Duchess, digging her sharp little chin
                                into Alice's shoulder as she added, and the moral of that is m-dash.
                            </p>
                        </div>
                    </div>
                    <div class="fr">
                        <div class="icon">
                            <img src="images/part5-icon2.png" alt="">
                        </div>
                        <div class="artcle">
                            <h3>On mouse over title</h3>
                            <p>
                                Then they both bowed low, and their curls got entangled together. Alice laughed so much
                                at
                                this, that she had to run back into the wood for fear of their hearing her.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="down">
                    <div class="fl">
                        <div class="icon">
                            <img src="images/part5-icon3.png" alt="">
                        </div>
                        <div class="artcle">
                            <h3>Brilliant creative design</h3>
                            <p>
                                Alice went timidly up to the door, and knocked. 'There's no sort of use in knocking,'
                                said the Footman, 'and that for two reasons.
                            </p>
                        </div>
                    </div>
                    <div class="fr">
                        <div class="icon">
                            <img src="images/part5-icon4.png" alt="">
                        </div>
                        <div class="artcle">
                            <h3>Responsive & retina ready</h3>
                            <p>
                                Alice went timidly up to the door, and knocked. 'There's no sort of use in knocking,'
                                said the Footman, 'and that for two reasons. First, because I'm on the same side.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- part6制作 -->
    <div class="part6" id="part6">
        <div class="mask"></div>
        <ul class="part6-img" id="part6-img">
            <li><img src="upload/part6-pc1.jpg" title="Danxia's Morning" alt=" Danxia's Morning"></li>
            <li><img src="upload/part6-pc2.jpg" title="Danxia's Morning" alt=" Danxia's Morning"></li>
            <li><img src="upload/part6-pc3.jpg" title="Danxia's Morning" alt=" Danxia's Morning"></li>
            <li><img src="upload/part6-pc4.jpg" title="Danxia's Morning" alt=" Danxia's Morning"></li>
            <li><img src="upload/part6-pc5.jpg" title="Danxia's Morning" alt=" Danxia's Morning"></li>
        </ul>
        <ol class="part6-dot" id="part6-dot">
        </ol>
    </div>
    <!-- part7制作 -->
    <div class="part7">
        <div class="w">
            <h2 class="arttitle">Latest blog posts</h2>
            <span class="line"></span>
            <ul>
                <li>
                    <img src="upload/part7-pc1.jpg" alt="">
                    <h2>Runway to Red Carpet:<br> Awards Season</h2>
                    <p>Her father worked on oil rigs and farms that through most of the Depression. But it is a new
                        story that has seared into my genetic.</p>
                    <div class="more">
                        <div class="fl">Learn more</div>
                        <div class="fr">450</div>
                    </div>
                </li>
                <li>
                    <img src="upload/part7-pc2.jpg" alt="">
                    <h2>Runway to Red Carpet:<br> Awards Season</h2>
                    <p>Her father worked on oil rigs and farms that through most of the Depression. But it is a new
                        story that has seared into my genetic.</p>
                    <div class="more">
                        <div class="fl">Learn more</div>
                        <div class="fr">450</div>
                    </div>
                </li>
                <li>
                    <img src="upload/part7-pc3.jpg" alt="">
                    <h2>Runway to Red Carpet:<br> Awards Season</h2>
                    <p>Her father worked on oil rigs and farms that through most of the Depression. But it is a new
                        story that has seared into my genetic.</p>
                    <div class="more">
                        <div class="fl">Learn more</div>
                        <div class="fr">450</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- .part8制作 -->
    <div class="part8">
        <div class="w">
            <h2 class="arttitle">Company expirience</h2>
            <span class="line"></span>
            <ul>
                <li>
                    <img src="images/part8-img1.png" alt="">
                    <div class="detail">
                        <h2>500</h2>
                        <p>years of web development</p>
                    </div>
                </li>
                <li>
                    <img src="images/part8-dot.png" alt="">
                </li>
                <li><img src="images/part8-img2.png" alt="">
                    <div class="detail">
                        <h2>25000</h2>
                        <p>results of the last<br>
                            winter year</p>
                    </div>
                </li>
                <li>
                    <img src="images/part8-dot.png" alt="">
                </li>
                <li>
                    <img src="images/part8-img3.png" alt="">
                    <div class="detail">
                        <h2>100000</h2>
                        <p>euros of the military<br>
                            budget</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- part9制作 -->
    <div class="part9">
        <div class="w">
            <h2 class="arttitle">Our team</h2>
            <span class="line"></span>
            <ul>
                <li>
                    <img src="upload/part9-pc1.jpg" alt="">
                    <div class="detail">
                        <p>Be who you are and say what you feel, because those who mind don't matter.</p>
                        <img src="images/part9-btn.png" alt="">
                    </div>
                    <div class="detail2">
                        <img src="images/part9-btn2.png" alt="">
                    </div>
                    <div class="sbox">
                        <h2>Manny Delgado</h2>
                        <p>a little boy</p>
                    </div>
                </li>
                <li>
                    <img src="upload/part9-pc2.jpg" alt="">
                    <div class="detail">
                        <p>Be who you are and say what you feel, because those who mind don't matter.</p>
                        <img src="images/part9-btn.png" alt="">
                    </div>
                    <div class="detail2">
                        <img src="images/part9-btn2.png" alt="">
                    </div>
                    <div class="sbox">
                        <h2>Manny Delgado</h2>
                        <p>a little boy</p>
                    </div>
                </li>
                <li>
                    <img src="upload/part9-pc3.jpg" alt="">
                    <div class="detail">
                        <p>Be who you are and say what you feel, because those who mind don't matter.</p>
                        <img src="images/part9-btn.png" alt="">
                    </div>
                    <div class="detail2">
                        <img src="images/part9-btn2.png" alt="">
                    </div>
                    <div class="sbox">
                        <h2>Manny Delgado</h2>
                        <p>a little boy</p>
                    </div>
                </li>
                <li>
                    <img src="upload/part9-pc4.jpg" alt="">
                    <div class="detail">
                        <p>Be who you are and say what you feel, because those who mind don't matter.</p>
                        <img src="images/part9-btn.png" alt="">
                    </div>
                    <div class="detail2">
                        <img src="images/part9-btn2.png" alt="">
                    </div>
                    <div class="sbox">
                        <h2>Manny Delgado</h2>
                        <p>a little boy</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 底部栏制作 -->
    <section class="footer">
        <div class="w">
            <div class="footer-line">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="footer-context">
                <ul>
                    <li class="footer-touch">
                        <h3>Get in touch</h3>
                        <ol>
                            <li>
                                <i class="fa fa-flag" aria-hidden="true"></i>
                                <p> <em>Address: </em>321 Street Name,United
                                    Kingdom, London</p>
                            </li>
                            <li>
                                <i class="fa fa-phone" aria-hidden="true"></i>
                                <p><em>Phone: </em>+7 99871150 30 20</p>
                            </li>
                            <li>
                                <i class="fa fa-envelope" aria-hidden="true"></i>
                                <p><em>Email: </em>info@ambertheme.com</p>
                            </li>
                            <li>
                                <img src="images/footer-map.png" alt="">
                            </li>
                        </ol>
                    </li>
                    <li class="footer-tweets">
                        <h3>Latest tweets</h3>
                        <ol>
                            <li>
                                <i class="fa fa-twitter" aria-hidden="true"></i>
                                <p>
                                    <em>CMS Masters And Their Best Web<br>
                                        Design Tools </em><a href="#">#bestwebdesigntools</a><br>
                                    <a href="#">#webdesign</a><br>
                                    — about 12 min ago
                                </p>
                            </li>
                            <li>

                                <i class="fa fa-twitter" aria-hidden="true"></i>
                                <p>
                                    <em>WOOCOMMERCE functionality<br>
                                        added!!! See Industrial theme become<br>
                                        even powerful! - </em><a href="#">bit.ly/industrial-wp</a><br>
                                    — about 47 days ago
                                </p>
                            </li>
                            <li>

                                <i class="fa fa-twitter" aria-hidden="true"></i>
                                <p>
                                    <em>CMS Masters And Their Best Web<br>
                                        Design Tools </em><a href="#">#bestwebdesigntools</a><br>
                                    <a href="#">#webdesign</a> <br>
                                </p>
                            </li>
                        </ol>
                    </li>
                    <li class="footer-app">
                        <h3>Follow us</h3>
                        <ol>
                            <li>
                                <img src="images/app-facebook.png" alt="">
                                <h3>Like us on Facebook</h3>
                            </li>
                            <li>
                                <img src="images/app-twitter.png" alt="">
                                <h3>Like us on Facebook</h3>
                            </li>
                            <li>
                                <img src="images/app-youtube.png" alt="">
                                <h3>Like us on Facebook</h3>
                            </li>
                            <li>
                                <img src="images/app-instagram.png" alt="">
                                <h3>Like us on Facebook</h3>
                            </li>
                            <li>
                                <img src="images/app-pinterest.png" alt="">
                                <h3>Like us on Facebook</h3>
                            </li>
                        </ol>
                    </li>
                    <li class="footer-post">
                        <h3>Popular posts</h3>
                        <ol>
                            <li>
                                <h3>September, 30</h3>
                                <p>Candy canes dragée pudding. Donut cheesecake I love chocolate icing </p>
                            </li>
                            <li>
                                <h3>April, 22</h3>
                                <p>Muffin croissant cookie sesame snaps. Ice cream donut cookie gingerbread</p>
                            </li>
                            <li>
                                <h3>May, 12</h3>
                                <p>Cotton candy muffin tart gummies candy danish liquorice chupa chups tootsie roll</p>
                            </li>
                        </ol>
                    </li>
                </ul>
            </div>
            <div class="footer-bottom">
                <div class="copy fl">
                    &copy;2014StylemixThemes.All rights reserved.<br>Powered by WordPress.
                </div>
                <div class="buttom fr">
                    <a href="#header"><img src="images/buttom-backbtn.png" alt=""></a>
                </div>
            </div>
        </div>

    </section>
</body>

</html>